import { reactive, onMounted } from 'vue'
import axios from 'axios'

//把数据和方法包含在一个函数里面
export default function () {
  //------------------数据-------------------------
  let dogList = reactive([
    'https://images.dog.ceo/breeds/pembroke/n02113023_7275.jpg'
  ])

  //------------------函数-------------------------
  async function getDog() {
    try {
      let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
      console.log(result.data.message);
      dogList.push(result.data.message) // 放入数据
    } catch (error) {
      alert(error)
    }
  }

  //------------------钩子函数---------------------
  onMounted(() => {  // 注意钩子里面写的是 函数 ()=>{}
    getDog()
  })
  //向外部提供数据
  return { dogList, getDog }
}